<template>

  <el-dialog v-model="dialogVisible" :title="Tips" width="42%" top="5vh" :before-close="handleClose"
    :close-on-click-modal="false" v-if="dialogVisible">
    <div class="addstu">
      <el-form :inline="true" :model="params" class="demo-form-inline" label-width="100px" ref="formRef">
        <div class="form">
          <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
            <el-input v-model="params.name" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="params.mobile" clearable />
          </el-form-item>
        </div>
        <el-form-item label="部门">
          <el-select v-model="depLists" placeholder="请选择" @change="changeDep">
            <el-option v-for="item in depOption" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="ClassList" placeholder="请选择" @change="changeClass">
            <el-option v-for="item in ClassOption" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input v-model="params.remarks" type="textarea" />
        </el-form-item>
        <div class="line" v-if="!params.id"></div>
        <div class="info" v-if="!params.id">
            <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '请输入账号' }]">
              <el-input v-model="params.username" clearable />
            </el-form-item>
            <el-form-item label="密码" prop="pass" :rules="[{ required: true, message: '请输入密码' },
            { min: 6, max: 16, message: '请输入6-16位的密码', trigger: 'blur' }]">
              <el-input v-model="params.pass" show-password clearable />
            </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button style="font-size: 12px" @click="
          (dialogVisible = false),
          emits('addStud', false),
          (datas.updLine = {})
        ">取消</el-button>
        <el-button style="font-size: 12px" type="primary" @click="submitForm(formRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { inject, reactive, ref, toRefs, watch, watchEffect } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance } from "element-plus"; //表单验证导入
// 引入封装接口
import { Department, Classes, setPass } from "../../apis/student/student";
import { useRouter } from "vue-router";
const formRef = ref<FormInstance>();
const data: any = reactive({
  dialogVisible: false,
  // 标题
  Tips: "",
  params: {
    id: 0,
    name: "",
    classid: "",
    username: "",
    pass: "",
    mobile: "",
    depid: "",
    remarks: "",
  },
  // 部门
  depLists: [],
  depOption: [],
  // 班级
  ClassList: [],
  ClassOption: [],
});
const {
  ClassOption,
  ClassList,
  depOption,
  depLists,
  params,
  Tips,
  dialogVisible,
}: any = toRefs(data);
// 关闭触发事件
const handleClose = (done: () => void) => {
  done();
  emits("addStud", false);
  datas.updLine = {};
};
// 子接父
const props: any = defineProps({
  isStu: {
    type: Boolean,
  },
  updLine: {
    type: <any>null,
  },
});
watch([props], () => {
  dialogVisible.value = props.isStu;
  data.params = JSON.parse(props.updLine);
  data.depLists = JSON.parse(props.updLine).depid;
  data.ClassList = JSON.parse(props.updLine).classid;
  if (params.value.id) {
    Tips.value = "修改学生";
  } else {
    Tips.value = "添加学生";
  }
});
const emits = defineEmits(["addStud"]);
const datas: any = inject("data");
// 部门列表
const depList = async () => {
  const res: any = await Department();
  if (res.errCode === 10000) {
    data.depOption = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
};
depList();
// 部门内容改变
const changeDep = async (e: any) => {
  params.value.depid = e;
  const res: any = await Classes({ depid: e });
  if (res.errCode === 10000) {
    data.ClassOption = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 班级内容改变
const changeClass = (e: any) => {
  params.value.classid = e;
};
// 添加方法
const router = useRouter();
const studentAdd = async () => {
  const res: any = await setPass(params.value);
  if (res.errCode === 10000) {
    datas.refreshs = true;
    ElMessage.success("添加成功");
    router.push("/Student");
    datas.refreshs = false;
  } else {
    ElMessage.error(res.errMsg);
  }
};

const stuUpd = async () => {
  const res: any = await setPass({ ...params.value, id: datas.updLine.id });
  if (res.errCode === 10000) {
    datas.refresh = true;
    ElMessage.success("修改成功");
    router.push("/Student");
    datas.refresh = false;
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 确定
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (params.value.id) {
        stuUpd();
      } else {
        studentAdd();
      }
      dialogVisible.value = false;
      emits("addStud", false);
      datas.updLine = {};
    } else {
      return false;
    }
  });
};
</script>
<style scoped>
@import url("../../static/css/student/StuAdd.css");

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>